// pages/Dashboard/QuickLeftPanel.jsx
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from 'contexts/AuthContext';
import {
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  Paper,
  Typography
} from '@mui/material';
import {
  Dashboard as DashboardIcon,
  Group as TeamsIcon,
  Groups as UserTeamsIcon,
  People as UsersIcon,
  Folder as WorkspacesIcon,
  CreditCard as CardIcon,
  AccountBox as AccountIcon,
  Person as ProfileIcon,
  Payment as PlanIcon
} from '@mui/icons-material';

const QuickLeftPanel = ({ 
  user, 
  borderRadius = 1, 
  border = 1, 
  borderColor = 'primary.main', 
  planType = 'basic', 
  role = 'user' 
}) => {
  const navigate = useNavigate();
  
  const isAdmin = user && (user.role === "admin" || user.role === "superadmin");
  
  const navigationItems = [
    { icon: <DashboardIcon />, text: 'Dashboard Home', path: '/dashboard' },
    { icon: <TeamsIcon />, text: 'Teams', path: '/teams' },
    { icon: <UserTeamsIcon />, text: 'My Teams', path: '/user-teams' },
    { icon: <WorkspacesIcon />, text: 'Workspaces', path: '/workspaces' },
    { icon: <CardIcon />, text: 'Add Payment Method', path: '/card/add' },
    { icon: <AccountIcon />, text: 'Account Settings', path: '/account/edit' },
    { icon: <ProfileIcon />, text: 'Profile Settings', path: '/user/edit' },
    { icon: <PlanIcon />, text: 'Plans', path: '/plan' }
  ];
  
  // Add admin-only items
  if (isAdmin) {
    navigationItems.splice(3, 0, { 
      icon: <UsersIcon />, 
      text: 'Users', 
      path: '/users' 
    });
  }
  
  const handleNavigation = (path) => {
    navigate(path);
  };
  
  return (
    <Paper 
      variant="outlined"
      sx={{
        borderRadius: borderRadius,
        border: `${border}px solid`,
        borderColor: borderColor
      }}
    >
      <Typography variant="h6" sx={{ p: 2, pb: 1 }}>
        Quick Navigation
      </Typography>
      <List dense>
        {navigationItems.map((item, index) => (
          <ListItem 
            key={index}
            button
            onClick={() => handleNavigation(item.path)}
          >
            <ListItemIcon>
              {item.icon}
            </ListItemIcon>
            <ListItemText primary={item.text} />
          </ListItem>
        ))}
      </List>
    </Paper>
  );
};

export default QuickLeftPanel;